<template>
  <div class="breadcrumb-wrap" v-if="breadcrumbList.length">
    <div class="breadcrumb-content g-flex-start-center">
      <template v-if="showBackBtn">
        <el-button text class="breadcrumb-link" @click="handleRouterBack">
          <CIcon type="c-xian-jianzuo" class="g-mr4"></CIcon>
          {{ backBtnName }}</el-button
        >
        <div class="breadcrumb_short_line"></div>
      </template>

      <el-breadcrumb :separator-icon="CIconArrowRight">
        <template v-for="(item, index) in breadcrumbList" :key="index">
          <el-breadcrumb-item>
            <el-button
              text
              :disabled="item.disabled"
              v-if="item.path"
              class="breadcrumb-link"
              @click="routerPush(item.path)"
              >{{ item.name }}</el-button
            >
            <span
              v-else
              class="breadcrumb-unlink"
              :class="{ 'breadcrumb-last': index == breadcrumbList.length - 1 }"
              >{{ item.name }}</span
            >
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'CBreadcrumb'
};
</script>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits } from 'vue';
import CIconArrowRight from '@/components/CIconArrowRight/index.vue';
import { useRouter } from 'vue-router';
import { isObject } from '@/utils/is';
interface IBreadItem {
  name: string;
  path: string;
  disabled: boolean;
}
interface IProps {
  breadcrumbList: IBreadItem[];
  showBackBtn?: boolean;
  backBtnName?: string;
}
withDefaults(defineProps<IProps>(), {
  breadcrumbList: () => [],
  showBackBtn: false,
  backBtnName: '返回'
});
const emits = defineEmits(['back']);

// 返回上一页
function handleRouterBack() {
  emits('back');
}

const router = useRouter();

const routerPush = (path: string) => {
  if (path.includes(':')) {
    const paramsArr = path.split(':');
    // 如果包含请求参数,重新拼接上去
    if (paramsArr[1].includes('?')) {
      const queryArr = paramsArr[1].split('?');
      const taskId = localStorage.getItem(queryArr[0]);
      router.push(`${paramsArr[0]}${taskId}?${queryArr[1]}`);
    } else {
      const taskId = localStorage.getItem(paramsArr[1]);
      router.push(`${paramsArr[0]}${taskId}`);
    }
  } else if (isObject(path)) {
    router.push(path);
  } else {
    router.push(path);
  }
};
</script>
